<template>
  <div>
    <template v-if="isCombinedWorkOrder">
      <div style="padding: 5px 0" class="item" v-if="isSpec">
        <template v-for="(item, index) in dataList">
          <td-spec :rowData="item" isCombinedWorkOrder v-if="index < 3"/>
        </template>
      </div>
      <div style="padding: 5px 0" class="item" v-else>
        <template v-for="(item, index) in dataList">
          <div :key="index" v-if="index < 3" style="padding: 5px 0">{{getLabel(item)}}</div>
        </template>
      </div>
      <q-btn flat
             color="primary"
             @click="show = true"
             class="table-flat-btn"
             style="margin-top: -7px;margin-left: -9px"
             v-if="dataList.length > 3"
      >
        更多>
      </q-btn>
    </template>

    <div v-else>
      <template v-if="isSpec"><td-spec :rowData="dataList[0]"/></template>
      <template v-else>{{getLabel(dataList[0])}}</template>
    </div>
    <basic-dialog :visible="show"
                  minWidth="400px"
                  :title="title"
                  :isFullScreen="false"
                  isShowClose
                  @close="show = false">
      <div style="padding: 10px 20px">
        <div v-for="(item, i) in dataList" :key="i" class="product-item font-14">{{i + 1}}、{{getLabel(isSpec ? item.productStandard : item)}}</div>
      </div>
    </basic-dialog>
  </div>
</template>

<script>
export default {
  name: 'detail-list',
  props: {
    title: {
      default: ''
    },
    dataList: {
      default: []
    },
    isCombinedWorkOrder: {
      default: false
    },
    isSpec: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      show: false
    }
  },
  methods: {
    showDialog () {
      this.show = true
    },
    getLabel (val) {
      return this.$utils.label(val)
    }
  }
}
</script>

<style scoped lang="stylus">
  .product-item{
    padding 10px 0
    color #333
  }
</style>
